<template>
  <div class="login-page">
    <div class="login-card">
      <div class="brand"><div class="logo">OB</div><div class="name">OceanBridge 商家中心</div></div>
      <form class="form" @submit.prevent="handleSubmit">
        <div class="form-item">
          <label>用户名或邮箱</label>
          <input v-model.trim="form.account" type="text" placeholder="请输入用户名或邮箱" required />
        </div>
        <div class="form-item">
          <label>密码</label>
          <input v-model="form.password" type="password" placeholder="请输入密码" required />
        </div>
        <div class="form-item form-inline">
          <label class="checkbox">
            <input type="checkbox" v-model="form.remember" /> 记住我
          </label>
          <div>
            <router-link to="/forgot" class="link">忘记密码？</router-link>
            <span style="margin:0 8px;color:#cbd5e1">|</span>
            <router-link to="/register" class="link">去注册</router-link>
          </div>
        </div>
        <button class="btn btn-primary" type="submit" :disabled="loading">{{ loading? '登录中...' : '登录' }}</button>
        <router-link to="/register" class="btn btn-secondary">注册账号</router-link>
        <div class="tips">登录即表示同意服务协议与隐私政策</div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { useAppStore } from '@/stores/app'

const router = useRouter()
const store = useAppStore()
const form = reactive({ account:'', password:'', remember: true })
const loading = ref(false)

async function handleSubmit(){
  if(!form.account || !form.password) return
  loading.value = true
  
  // 模拟登录延迟
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  try{
    // 假的测试登录 - 任何用户名和密码都可以登录
    const mockResponse = {
      accessToken: 'mock-access-token-' + Date.now(),
      refreshToken: 'mock-refresh-token-' + Date.now(),
      userId: 'test-user-123',
      username: form.account || 'testuser'
    }
    
    const { accessToken, refreshToken, userId, username } = mockResponse
    
    store.setAccessToken(accessToken)
    store.setUserInfo({ id: userId, username })
    if (form.remember) localStorage.setItem('refreshToken', refreshToken||'')

    ElMessage.success('登录成功！')
    
    const redirect = router.currentRoute.value.query.redirect || '/dashboard'
    router.replace(String(redirect))
  }catch(e){
    ElMessage.error(e?.message || '登录失败，请重试')
  }finally{ loading.value=false }
}
</script>

<style scoped>
@import '@/assets/auth.css';
</style>

